<template>
	<DocWrap>
		<DocCodepen>
			<UIImage :src="CoverBgPng" style="width: 200px;" alt="洛天依"></UIImage>
			<div style="width: 200px;height: 200px;overflow: auto;">
				<div style="height: 400px;"></div>
				<UIImage :src="CoverBgPng" lazy></UIImage>
			</div>
		</DocCodepen>
		<DocUse>
			<h3>props</h3>
			<el-table :data="propsData">
				<el-table-column prop="prop" label="属性" width="180" />
				<el-table-column prop="type" label="类型" width="180" />
				<el-table-column prop="exp" label="说明" />
			</el-table>
			<h3>events</h3>
			<el-table :data="eventsData">
				<el-table-column prop="event" label="事件" width="180" />
				<el-table-column prop="args" label="参数" width="180" />
				<el-table-column prop="exp" label="说明" />
			</el-table>
			<h3>slots</h3>
			<el-table :data="slotsData">
				<el-table-column prop="slot" label="插槽" width="180" />
				<el-table-column prop="data" label="数据" width="180" />
				<el-table-column prop="exp" label="说明" />
			</el-table>
		</DocUse>
	</DocWrap>
</template>

<script setup>
	
	import DocWrap from '../../doc/wrap';
	import DocCodepen from '../../doc/codepen';
	import DocUse from '../../doc/use';
	import UIImage from '@/ui/image';
	
	import CoverBgPng from '@/assets/image/cover_bg.png';
	
	const propsData = [
		{
			prop: 'src',
			type: 'String',
			exp: '地址'
		}, {
			prop: 'alt',
			type: 'String',
			exp: '文字，同img标签alt'
		}, {
			prop: 'lazy',
			type: 'Boolean',
			exp: '懒加载'
		}, {
			prop: 'fit',
			type: 'String',
			exp: '填充，同img标签object-fit'
		}, {
			prop: 'position',
			type: 'String',
			exp: '位置，同img标签object-position'
		}, {
			prop: 'loadingProcess',
			type: 'Boolean(true)',
			exp: '加载过程状态'
		}
	];
	
	const eventsData = [
		{
			event: 'load',
			exp: '开始加载'
		}, {
			event: 'success',
			args: 'e',
			exp: '加载成功'
		}, {
			event: 'error',
			args: 'e',
			exp: '加载失败'
		}
	]
	
	const slotsData = [
		{
			slot: 'loading',
			exp: '加载中'
		}, {
			slot: 'error',
			exp: '加载失败'
		}
	]
	
</script>

<style lang="scss" scoped>
</style>